import  React, { Component } from 'react'

export default class CommentBox extends Component {
  constructor (props){
    super(props)
    // this.state = {
    //   value: ''
    // }
    // this.handleChange=this.handleChange.bind(this)
    this.handleSubmit=this.handleSubmit.bind(this)
  }
  // handleChange(event){
  //   this.setState({
  //     value:event.target.value
  //   })
  // }
  handleSubmit(event){
    // alert(this.state.value)
    this.props.onAddComment(this.textInput.value)
    event.preventDefault()
  }
  render() {
    return (
      <form className="p-5" onSubmit={this.handleSubmit}> 
        <div className="form-group">
          <label>留言内容</label>
          <input
            type="text"
            className="form-control"
            placeholder='请输入内容'
            // onChange={this.handleChange} //不能用箭头函数那种了，要不然没法传event
            // value={this.state.value}
            ref={(textInput)=>{
              this.textInput=textInput //textInput是指这个dom节点，赋给了这个class里面的变量
            }}
          />
        </div>
        <button type="submit" className="btn btn-primary" >留言</button>
        <p>已有{this.props.commentsLength}条评论</p>
      </form>
    )
  }
}
